বুটস্ট্রাপ ৫ এর মডাল (Modal) এবং ডায়ালগ (Dialogs) ব্যবহারকারীদের জন্য একটি সেন্ট্রাল পপ-আপ উইন্ডো তৈরি করতে সহায়তা করে। এটি সাধারণত কোন অ্যাকশন বা বার্তা প্রদর্শন করতে ব্যবহৃত হয়, যেমন: সাবমিট, কনফার্মেশন, বা গুরুত্বপূর্ণ তথ্য। মডাল উইন্ডোকে সোজাসুজি ক্লোজ করা যায় এবং এটি পেজের অন্যান্য কন্টেন্টের উপর উপস্থিত হয়।
বুটস্ট্রাপ ৫ মডাল এবং ডায়ালগ ব্যবহার করার জন্য সহজ এবং শক্তিশালী কাস্টমাইজেশন অপশন প্রদান করে।
বুটস্ট্রাপ ৫-এ মডাল উইন্ডো তৈরি করতে modal ক্লাস ব্যবহার করা হয়। এটি একটি ফ্লোটিং পপ-আপ উইন্ডো যা সাধারণত পেজের ভিতরে বিভিন্ন কনটেন্ট বা সতর্কতা দেখাতে ব্যবহৃত হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
মডাল দেখান
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">মডাল শিরোনাম</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এখানে কিছু কনটেন্ট বা বার্তা যাবে।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সাবমিট</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
data-bs-toggle="modal": এই অ্যাট্রিবিউটটি টগল বাটনকে মডাল উইন্ডোর সাথে সংযুক্ত করে। ক্লিক করার পর মডালটি প্রদর্শিত হবে।data-bs-target="#exampleModal": টগল বাটনকে নির্দেশ দেয় কোন মডাল উইন্ডোটি প্রদর্শন হবে। এখানে #exampleModal হল মডালের ID।modal-dialog: মডাল উইন্ডোর আকার এবং লেআউট কাস্টমাইজ করার জন্য এই ক্লাসটি ব্যবহার করা হয়।modal-content: মডাল উইন্ডোর কন্টেন্ট ধারণ করে।btn-close: মডাল উইন্ডো বন্ধ করার জন্য বাটন।বুটস্ট্রাপ ৫ এর মডাল উইন্ডো কাস্টমাইজ করা বেশ সহজ। আপনি মডালের সাইজ, অ্যানিমেশন, এবং অন্যান্য অপশন পরিবর্তন করতে পারেন:
modal-sm: ছোট মডালmodal-lg: বড় মডালmodal-fullscreen: পুরো স্ক্রীন মডাল<div class="modal-dialog modal-lg">
<!-- Large Modal Content Here -->
</div>
data-bs-dismiss="modal" ব্যবহার করতে পারেন।ডায়ালগ ও মডালের মধ্যে পার্থক্য মূলত কনটেন্টের প্রস্থ এবং উদ্দেশ্যে। ডায়ালগ সাধারণত ব্যবহারকারীকে কোনো সিদ্ধান্ত নিতে বা গুরুত্বপূর্ণ তথ্য দিতে প্রম্পট করে।
বুটস্ট্রাপ ৫-এ ডায়ালগ তৈরি করার জন্যও মডালের মতোই modal ক্লাস ব্যবহার করা হয়। তবে, কিছু ক্ষেত্রে ডায়ালগ উইন্ডো কাস্টমাইজড হতে পারে এবং কোনো তথ্যের জন্য সতর্কতা বা কনফার্মেশন বার্তা প্রদর্শন করতে ব্যবহৃত হয়।
<!-- Confirmation Dialog -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmationModalLabel">আপনার নিশ্চিতকরণ প্রয়োজন</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
আপনি কি সত্যিই এই কাজটি করতে চান?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বাতিল করুন</button>
<button type="button" class="btn btn-danger">হ্যাঁ, নিশ্চিত করুন</button>
</div>
</div>
</div>
</div>
এখানে, একটি কনফার্মেশন ডায়ালগ তৈরি করা হয়েছে, যেখানে ব্যবহারকারী "হ্যাঁ" অথবা "বাতিল" বাটন দিয়ে সিদ্ধান্ত নিতে পারবেন।
বুটস্ট্রাপ ৫ এ মডাল এবং ডায়ালগ ব্যবহারকারীদের জন্য খুবই শক্তিশালী ও রেসপন্সিভ পপ-আপ উইন্ডো তৈরি করার উপায় প্রদান করে। আপনি সহজেই বিভিন্ন কাস্টমাইজেশন অপশন দিয়ে মডাল উইন্ডোর সাইজ, বাটন, ক্লোজ অপশন ইত্যাদি কাস্টমাইজ করতে পারবেন। মডাল এবং ডায়ালগ ব্যবহার করে আপনার ওয়েব অ্যাপ্লিকেশন বা সাইটে আরও কার্যকরী এবং ইন্টারেকটিভ ইউজার এক্সপিরিয়েন্স তৈরি করা সম্ভব।
বুটস্ট্রাপ ৫ এ মডাল একটি পপ-আপ উইন্ডো যা ব্যবহারকারীদের কাছ থেকে ইনপুট নেয়ার জন্য বা কোন গুরুত্বপূর্ণ তথ্য দেখানোর জন্য ব্যবহৃত হয়। এটি পেজের উপরে এসে সেন্ট্রালাইজডভাবে প্রদর্শিত হয়, এবং সাধারণত একটি ডায়ালগ বক্সের মতো কাজ করে। বুটস্ট্রাপ ৫ এ মডাল তৈরি এবং কনফিগার করা খুবই সহজ এবং রেসপন্সিভ হয়।
এখানে আমরা মডাল তৈরি এবং কনফিগার করার প্রাথমিক পদক্ষেপগুলো আলোচনা করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>বুটস্ট্রাপ মডাল উদাহরণ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- মডাল টগল বাটন -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
মডাল ওপেন করুন
</button>
<!-- মডাল কাঠামো -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- মডাল হেডার -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">মডাল শিরোনাম</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- মডাল বডি -->
<div class="modal-body">
এখানে আপনি আপনার মডাল কনটেন্ট লিখতে পারেন।
</div>
<!-- মডাল ফুটার -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সংরক্ষণ করুন</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
data-bs-toggle="modal": এই অ্যাট্রিবিউটটি বাটনটি মডাল টগল করার জন্য কনফিগার করে।data-bs-target="#exampleModal": এই অ্যাট্রিবিউটটি বাটনটি কোন মডালকে টগল করবে তা নির্ধারণ করে (এখানে #exampleModal হলো মডালটির ID)।modal: মডাল উইন্ডোর মূল কনটেইনার।modal-dialog: মডালের ডায়ালগ বক্সের কনটেইনার।modal-content: মডাল উইন্ডোর ভিতরের কন্টেন্ট।modal-header: মডালের হেডার যেখানে শিরোনাম এবং ক্লোজ বাটন থাকে।modal-body: মডালের প্রধান কন্টেন্ট যেখানে আপনি তথ্য বা ফর্ম উপস্থাপন করতে পারেন।modal-footer: মডালের ফুটার যেখানে এক্সট্রা বাটন (যেমন: ক্লোজ, সাবমিট) থাকে।data-bs-dismiss="modal": এই অ্যাট্রিবিউটটি মডাল উইন্ডো বন্ধ করতে ব্যবহৃত হয়।বুটস্ট্রাপ ৫ এ মডাল কিছু কনফিগারেশন অ্যাট্রিবিউট এবং ক্লাসের মাধ্যমে কাস্টমাইজ করা যায়।
fade: এটি মডাল উইন্ডোকে সুন্দরভাবে অ্যানিমেটেডভাবে প্রদর্শন এবং বন্ধ করার জন্য ব্যবহৃত হয়।show: যদি আপনি চান মডালটি পেজ লোড হওয়ার সময় স্বয়ংক্রিয়ভাবে ওপেন হোক, তাহলে show ক্লাস যোগ করতে পারেন।<div class="modal fade show" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: block;">
<!-- মডাল কনটেন্ট -->
</div>
এখানে, show ক্লাস এবং style="display: block;" ব্যবহার করে মডালটি স্বয়ংক্রিয়ভাবে পেজ লোড হওয়ার সাথে সাথে ওপেন করা হবে।
বুটস্ট্রাপ ৫ এ মডালের সাইজ কাস্টমাইজ করতে কিছু ক্লাস ব্যবহার করা হয়:
modal-lg: বড় মডাল।modal-sm: ছোট মডাল।<div class="modal-dialog modal-lg">
<!-- মডাল কনটেন্ট -->
</div>
<div class="modal-dialog modal-sm">
<!-- মডাল কনটেন্ট -->
</div>
বুটস্ট্রাপ ৫-এ মডাল তৈরি করা খুবই সহজ এবং এটি রেসপন্সিভ ওয়েব ডিজাইনের জন্য উপযুক্ত। মডালটি বিভিন্ন কনফিগারেশন এবং কাস্টমাইজেশন অপশনের মাধ্যমে ব্যবহারকারীর ইন্টারঅ্যাকশন এবং তথ্য প্রদর্শনের জন্য অত্যন্ত কার্যকরী। টগল বাটন, ফেড অ্যানিমেশন, ডায়ালগ সাইজ কাস্টমাইজেশন ইত্যাদি সুবিধা দিয়ে আপনি মডালকে আরও উন্নতভাবে ব্যবহার করতে পারেন।
বুটস্ট্রাপ ৫ এ Modal হলো একটি পপ-আপ ডায়ালগ যা সাধারণত ব্যবহারকারীর কোনো কার্যক্রমের জন্য ইনপুট বা ফিডব্যাক প্রদানের উদ্দেশ্যে ব্যবহৃত হয়। মডালটি সাধারাণত একটি সেন্ট্রালাইজড উইন্ডো হিসেবে স্ক্রীনের উপর প্রদর্শিত হয় এবং এটি ব্যবহারকারীকে অন্য কন্টেন্ট থেকে আলাদা করে বিশেষ মনোযোগ আকর্ষণ করতে সাহায্য করে। বুটস্ট্রাপ ৫-এ মডাল সাইজ এবং কাস্টমাইজেশন বেশ সহজ এবং নমনীয়।
বুটস্ট্রাপ ৫ এ আপনি মডালের সাইজ কাস্টমাইজ করতে পারেন। মডালটির আকার নির্ধারণের জন্য modal-lg (বড় মডাল), modal-sm (ছোট মডাল), অথবা অন্যান্য কাস্টম সাইজ ব্যবহার করা যায়।
modal-lg: বড় মডালmodal-sm: ছোট মডাল<!-- বড় মডাল বাটন -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
বড় মডাল দেখুন
</button>
<!-- বড় মডাল -->
<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">বড় মডাল</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এটি একটি বড় মডাল উদাহরণ।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সেভ করুন</button>
</div>
</div>
</div>
</div>
<!-- ছোট মডাল বাটন -->
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#smallModal">
ছোট মডাল দেখুন
</button>
<!-- ছোট মডাল -->
<div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModalLabel">ছোট মডাল</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এটি একটি ছোট মডাল উদাহরণ।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সেভ করুন</button>
</div>
</div>
</div>
</div>
বুটস্ট্রাপ ৫ এর মডালকে আরও কাস্টমাইজ করা সম্ভব, যেমন: আলাদা ব্যাকগ্রাউন্ড, বর্ডার, ট্রান্সপ্যারেন্স, ইনপুট ফিল্ড, এবং অন্যান্য স্টাইল পরিবর্তন করা। এখানে কিছু কাস্টমাইজেশন পদ্ধতি দেওয়া হলো।
আপনি CSS দিয়ে মডাল উইন্ডোর ব্যাকগ্রাউন্ড রং পরিবর্তন করতে পারেন।
<style>
.modal-content {
background-color: #f0f8ff; /* আকাশি রং */
}
</style>
যদি আপনি মডালের আকারে আরও কাস্টমাইজেশন করতে চান (যেমন: বড় অথবা ছোট নয়), তাহলে আপনি modal-dialog ক্লাসে CSS ব্যবহার করে আপনার প্রয়োজনীয় আকার ঠিক করতে পারেন।
<style>
.modal-dialog {
max-width: 90%;
}
</style>
এটি মডালের প্রস্থ ৯০% পর্যন্ত বিস্তৃত করবে।
মডালের টাইটেল এবং কন্টেন্টকে আরও সুন্দরভাবে কাস্টমাইজ করতে আপনি স্টাইল ব্যবহার করতে পারেন।
<style>
.modal-title {
color: #4CAF50; /* সবুজ রঙ */
font-weight: bold;
}
.modal-body {
font-size: 1.2rem;
color: #555;
}
</style>
আপনি btn-close বাটনের পরিবর্তে কোনো কাস্টম বাটন ব্যবহার করতে পারেন।
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">
কাস্টম ক্লোজ বাটন
</button>
বুটস্ট্রাপ ৫-এ আপনি মডালকে স্বয়ংক্রিয়ভাবে প্রদর্শন করতে পারেন data-bs-show অ্যাট্রিবিউট ব্যবহার করে, এবং মডালটি স্বয়ংক্রিয়ভাবে বন্ধ করতে data-bs-dismiss="modal" ব্যবহার করা হয়।
<!-- স্বয়ংক্রিয়ভাবে মডাল শো করা -->
<div class="modal fade" id="autoModal" tabindex="-1" aria-labelledby="autoModalLabel" aria-hidden="true" data-bs-show="true">
<!-- মডাল কন্টেন্ট -->
</div>
বুটস্ট্রাপ ৫ এ মডাল ব্যবহার করে আপনি সুন্দর এবং রেসপন্সিভ ডায়ালগ উইন্ডো তৈরি করতে পারেন। মডাল সাইজ কাস্টমাইজ করা এবং বিভিন্ন কন্টেন্ট উপাদান ব্যবহার করে এটি আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি হতে পারে। modal-lg এবং modal-sm ক্লাস ব্যবহার করে মডালের আকার নিয়ন্ত্রণ করা সম্ভব এবং CSS দিয়ে আরও কাস্টমাইজেশন করা যায়।
বুটস্ট্রাপ ৫ এ মডাল (Modal) একটি অত্যন্ত জনপ্রিয় উপাদান যা ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন করার জন্য পপ-আপ উইন্ডো প্রদর্শন করতে ব্যবহৃত হয়। মডালগুলি সাধারণত ইমপোর্ট্যান্ট মেসেজ বা কনফারমেশন বক্স শো করার জন্য ব্যবহৃত হয়। দুইটি সাধারণ মডাল হল:
এই টিউটোরিয়ালে আমরা কিভাবে বুটস্ট্রাপ ৫ এর সাহায্যে কনফারমেশন ডায়ালগ এবং এলার্ট মডাল তৈরি করা যায়, তা দেখবো।
কনফারমেশন ডায়ালগ সাধারণত ব্যবহারকারীকে একটি অ্যাকশন কনফার্ম করার জন্য জিজ্ঞেস করে। এটি মূলত একটি মডাল ডায়ালগ হয়, যেখানে দুটি বাটন থাকে: Confirm এবং Cancel। ব্যবহারকারী যদি Confirm বাটনে ক্লিক করেন, তবে সেই অ্যাকশন কার্যকর হয়।
<!-- Trigger Button -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmationModal">
ডিলিট করুন
</button>
<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmationModalLabel">কনফার্মেশন</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
আপনি কি নিশ্চিত যে আপনি এই আইটেমটি ডিলিট করতে চান?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ক্যানসেল</button>
<button type="button" class="btn btn-danger">হ্যাঁ, ডিলিট করুন</button>
</div>
</div>
</div>
</div>
এখানে:
data-bs-toggle="modal": এই অ্যাট্রিবিউটটি ব্যবহার করে টগল বাটন তৈরি করা হয়, যা মডাল খুলবে।data-bs-target="#confirmationModal": এখানে টগল বাটনটি মডালটির ID কে টার্গেট করে, তাই বাটন ক্লিক করলে মডালটি খোলা হবে।btn-close: মডাল বন্ধ করার জন্য একটি ক্লোজ বাটন।modal-footer: কনফার্মেশন মডালের ফুটার, যেখানে Confirm এবং Cancel বাটন থাকে।এলার্ট মডাল সাধারণত একটি সতর্কবার্তা বা ইনফরমেশন প্রদর্শনের জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীকে কোনো সফলতা, ত্রুটি বা অন্যান্য গুরুত্বপূর্ণ বার্তা জানাতে সাহায্য করে।
<!-- Trigger Button -->
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#alertModal">
সতর্কতা দেখান
</button>
<!-- Alert Modal -->
<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="alertModalLabel">সতর্কতা</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এটি একটি সতর্কবার্তা! কিছু ভুল হয়েছে।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-bs-dismiss="modal">ঠিক আছে</button>
</div>
</div>
</div>
</div>
এখানে:
btn-warning: সতর্কবার্তা দেখানোর জন্য একটি Warning স্টাইল করা বাটন ব্যবহার করা হয়েছে।modal-body: এখানে সতর্কবার্তা বা মেসেজটি দেখানো হয়।btn-close: মডালটি বন্ধ করার জন্য একটি ক্লোজ বাটন।data-bs-dismiss="modal": মডাল বন্ধ করার জন্য ব্যবহৃত।বুটস্ট্রাপ মডালগুলি কাস্টমাইজযোগ্য এবং আপনি বিভিন্ন অপশন দিয়ে মডালের আকার, স্টাইল এবং আচরণ নিয়ন্ত্রণ করতে পারেন।
modal-lg: বড় আকারের মডাল।modal-sm: ছোট আকারের মডাল।<!-- Large Modal -->
<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Content here -->
</div>
</div>
</div>
<!-- Small Modal -->
<div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Content here -->
</div>
</div>
</div>
মডালটি নির্দিষ্ট সময় পরে স্বয়ংক্রিয়ভাবে বন্ধ করার জন্য JavaScript ব্যবহার করতে পারেন।
// মডালটি ৫ সেকেন্ড পর বন্ধ হবে
setTimeout(function() {
var myModal = new bootstrap.Modal(document.getElementById('alertModal'));
myModal.hide();
}, 5000);
বুটস্ট্রাপ ৫ এর কনফারমেশন ডায়ালগ এবং এলার্ট মডাল ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ এবং রেসপন্সিভ পপ-আপ উইন্ডো তৈরি করতে পারেন। কনফারমেশন ডায়ালগ ব্যবহৃত হয় ব্যবহারকারীর কাছ থেকে কনফার্মেশন নেওয়ার জন্য, এবং এলার্ট মডাল ব্যবহার করা হয় তথ্য বা সতর্কবার্তা দেখানোর জন্য। এই দুটি উপাদান খুব সহজেই কাস্টমাইজ এবং ব্যবহারযোগ্য, এবং বিভিন্ন প্রকারের ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।
বুটস্ট্রাপ ৫ এ মডাল (Modal) একটি পপ-আপ উইন্ডো হিসেবে ব্যবহৃত হয়, যা ব্যবহারকারীর সঙ্গে ইন্টারঅ্যাকশন করার জন্য গুরুত্বপূর্ণ কন্টেন্ট দেখানোর জন্য উপযোগী। মডাল বিভিন্ন ইভেন্টের মাধ্যমে কন্ট্রোল করা যায় এবং এতে অ্যানিমেশন ব্যবহার করে আরও সুন্দর এবং ইন্টারঅ্যাকটিভ এফেক্ট তৈরি করা যায়।
এখানে আমরা মডাল ইভেন্ট এবং অ্যানিমেশন নিয়ে বিস্তারিত আলোচনা করব।
বুটস্ট্রাপ ৫ মডালের জন্য কিছু গুরুত্বপূর্ণ ইভেন্ট প্রদান করে, যা বিভিন্ন সময় মডাল ওপেন, ক্লোজ, অথবা হিডেন হওয়ার সময় ট্রিগার হয়। এই ইভেন্টগুলো ব্যবহার করে আপনি মডালের আচরণ কাস্টমাইজ করতে পারেন।
show.bs.modal
মডাল খোলার আগে এটি ট্রিগার হয়। এই ইভেন্টটি মডাল খোলার জন্য প্রস্তুতি নেওয়ার সময় ব্যবহৃত হয়।
$('#myModal').on('show.bs.modal', function (event) {
console.log('মডাল খোলার প্রক্রিয়া শুরু');
});
shown.bs.modal
মডাল সম্পূর্ণরূপে খুলে গেলে এটি ট্রিগার হয়। এটি ব্যবহৃত হয় যখন মডাল পুরোপুরি প্রদর্শিত হয়ে যায়।
$('#myModal').on('shown.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে প্রদর্শিত হয়েছে');
});
hide.bs.modal
মডাল বন্ধ হওয়ার আগে এই ইভেন্টটি ট্রিগার হয়। এটি ব্যবহৃত হয় যখন মডালটি বন্ধ হতে যাচ্ছে।
$('#myModal').on('hide.bs.modal', function (event) {
console.log('মডাল বন্ধ হওয়ার প্রক্রিয়া শুরু');
});
hidden.bs.modal
মডাল সম্পূর্ণরূপে বন্ধ হয়ে গেলে এটি ট্রিগার হয়। এটি ব্যবহারকারীর ইন্টারঅ্যাকশন পর মডাল সম্পূর্ণভাবে বন্ধ হয়ে যাওয়ার সময় ব্যবহৃত হয়।
$('#myModal').on('hidden.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে বন্ধ হয়েছে');
});
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">মডাল শিরোনাম</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এইখানে মডালের কন্টেন্ট থাকবে।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সংরক্ষণ করুন</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
মডাল খুলুন
</button>
<script>
// Modal Events
$('#myModal').on('show.bs.modal', function (event) {
console.log('মডাল খোলার প্রক্রিয়া শুরু');
});
$('#myModal').on('shown.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে প্রদর্শিত হয়েছে');
});
$('#myModal').on('hide.bs.modal', function (event) {
console.log('মডাল বন্ধ হওয়ার প্রক্রিয়া শুরু');
});
$('#myModal').on('hidden.bs.modal', function (event) {
console.log('মডাল সম্পূর্ণরূপে বন্ধ হয়েছে');
});
</script>
বুটস্ট্রাপ ৫ মডালগুলির জন্য কিছু অ্যানিমেশন রয়েছে যা আপনি কাস্টমাইজ করতে পারেন। মডালটি ওপেন বা ক্লোজ হওয়ার সময় সাধারণত একটি স্লাইডিং বা ফেড ইন/আউট অ্যানিমেশন ব্যবহার করা হয়। বুটস্ট্রাপ ৫ এ মডালটির জন্য এই অ্যানিমেশন fade ক্লাস ব্যবহার করে সক্রিয় করা হয়।
<!-- Modal with fade animation -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">অ্যানিমেটেড মডাল</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
এই মডালটি ফেড অ্যানিমেশন সহ প্রদর্শিত হচ্ছে।
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্ধ করুন</button>
<button type="button" class="btn btn-primary">সংরক্ষণ করুন</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
অ্যানিমেটেড মডাল খুলুন
</button>
এখানে fade ক্লাসটি মডালকে ফেড ইন/আউট অ্যানিমেশন দেয়। যখন মডালটি খুলবে, এটি ধীরে ধীরে প্রদর্শিত হবে এবং বন্ধ হলে ধীরে ধীরে অদৃশ্য হয়ে যাবে।
যদি আপনি মডালের অ্যানিমেশন টেমপ্লেট কাস্টমাইজ করতে চান, তাহলে আপনি CSS দিয়ে ফেড ইন বা স্লাইড ইফেক্ট বাড়াতে পারেন।
.modal.fade .modal-dialog {
transform: translate(0, -50px);
transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
transform: translate(0, 0);
}
এটি মডালটির ওপেন হওয়ার সময় একটি স্লাইড ইফেক্ট যোগ করবে, যা মডালটি স্ক্রীনের উপরের অংশ থেকে আসবে।
বুটস্ট্রাপ ৫-এ মডাল ইভেন্টস এবং অ্যানিমেশন ব্যবহারের মাধ্যমে আপনি মডালের আচরণ কাস্টমাইজ করতে পারেন। show.bs.modal, shown.bs.modal, hide.bs.modal, এবং hidden.bs.modal ইভেন্টগুলো ব্যবহার করে আপনি মডালের ওপেনিং এবং ক্লোজিং প্রক্রিয়া কন্ট্রোল করতে পারেন। মডালটির অ্যানিমেশন fade ক্লাস ব্যবহার করে সহজেই সক্রিয় করা যায়, এবং CSS কাস্টমাইজেশন দ্বারা অ্যানিমেশন আরও ইন্টারঅ্যাকটিভ করা সম্ভব।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
